<template>
  <view class="page-body">
    <div class="page-header">
      <u-navbar
        title="拼团"
        :title-color="headerBgColor == '#fff' ? '#262626' : '#fff'"
        :back-icon-color="headerBgColor == '#fff' ? '#262626' : '#fff'"
        :border-bottom="false"
        :customBack="goBack"
        height="44"
        :background="{ background: headerBgColor }"
      >
      </u-navbar>
      <div class="search">
        <div
          :style="{ background: headerBgColor, top: searchTop }"
          class="search-fixed"
        >
          <u-search
            @search="getGoods(true)"
            v-model="searchForm.goods_name"
            placeholder="请输入商品名称搜索"
            :show-action="false"
          ></u-search>
        </div>
      </div>

      <div class="swiper-box">
        <u-swiper
          :list="bannerList"
          autoplay
          circular
          interval="5000"
          @click="clickSwiperItem"
          mode="rect"
          name="cover_pic"
          border-radius="20"
          height="240"
        ></u-swiper>
      </div>
    </div>
    <div class="page-content">
      <div
        class="tabs"
        :style="{
          top: tbasTop,
          background: headerBgColor == '#fff' ? '#fff' : '#f2f2f2',
        }"
      >
        <u-tabs
          :bar-style="{
            bottom: '10rpx',
          }"
          height="84"
          active-color="#F0250E"
          :active-item-style="{
            color: '#333',
          }"
          :list="tabsList"
          :current="tabsCurrent"
          @change="tabsChange"
        ></u-tabs>
      </div>

      <GoodsList :goodsList="goodsList"> </GoodsList>

      <div class="u-p-b-20">
        <u-loadmore :status="loadmoreStatus"></u-loadmore>
      </div>
    </div>

    <div class="my-order" @click="$utils.toUrl('/pt/order/index')">
      我的订单
    </div>
  </view>
</template>

<script>
import GoodsList from './components/GoodsList';
export default {
  components: {
    GoodsList,
  },
  data() {
    return {
      headerBgColor: '#f0250e',
      tabsCurrent: 0,
      tabsList: [],
      sys: uni.getSystemInfoSync(),
      bannerList: [],
      goodsList: [],
      cat_id: -1,
      searchForm: {
        pageNo: 1,
        pageSize: 10,
        goods_name: '',
      },
      loadmoreStatus: 'loadmore', //未加载到底
    };
  },
  computed: {
    tbasTop() {
      return `calc(${this.sys.statusBarHeight + 44}px + 100rpx)`;
    },
    searchTop() {
      return `calc(${this.sys.statusBarHeight + 44}px)`;
    },
  },
  created() {
    this.loadData();
  },

  methods: {
    async loadData() {
      await this.getCat();
      await this.getGoods();
      this.getBanner();
    },
    async getBanner() {
      const res = await this.$allrequest.pt.getPtBanner();
      this.bannerList = res.data.list;
    },
    async getCat() {
      const res = await this.$allrequest.pt.getPtCat();
      this.tabsList = res.data.list;
      this.cat_id = res.data.list[0]?.id || -1;
    },
    async getGoods(reset) {
      if (reset) {
        let { searchForm, loadmoreStatus, goodsList } = this.$options.data();
        this.searchForm = {
          ...searchForm,
          goods_name: this.searchForm.goods_name,
        };
        this.goodsList = goodsList;
        this.loadmoreStatus = loadmoreStatus;
      }

      // 加载到底
      if (this.loadmoreStatus == 'nomore') return;

      const res = await this.$allrequest.pt.getPtGoodsList(
        {
          ...this.searchForm,
          cat_id: this.cat_id,
        },
        true
      );
      this.searchForm.pageNo++;
      this.goodsList = res.data.list;
      this.loadmoreStatus =
        this.goodsList.length >= res.data.totalCount ? 'nomore' : 'loadmore';
    },
    tabsChange(e) {
      this.tabsCurrent = e;
      this.cat_id = this.tabsList[e].id;
      this.getGoods(true);
    },
    goBack() {
      this.$utils.goBack();
    },
    clickSwiperItem(e) {
      let item = this.bannerList[e];
      let link = item.url;
      this.$utils.diySkip(link);
    },
  },
  onReachBottom() {
  },
  onPageScroll({ scrollTop }) {
    if (scrollTop > 44) {
      this.headerBgColor = '#fff';
    } else {
      this.headerBgColor = this.$options.data().headerBgColor;
    }
  },
};
</script>

<style lang="scss" scoped>
.page-body {
  min-height: 100vh;

  padding-bottom: env(safe-area-inset-bottom);
  background: #f2f2f2;

  .page-header {
    .search {
      height: 100rpx;
      .search-fixed {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 9;
        width: 100%;
        height: 100rpx;
        padding: 0 24rpx;
      }
    }
    /deep/ .swiper-box {
      padding: 0 24rpx;
      background: linear-gradient(
        180deg,
        #f0250e 0%,
        #f2f2f2 55%,
        #f2f2f2 100%
      );
      .u-indicator-item-rect {
        border-radius: 6rpx;
        height: 6rpx;
        width: 10rpx;
        background: rgba($color: #fff, $alpha: 0.4);
      }
      .u-indicator-item-rect-active {
        background: rgba($color: #fff, $alpha: 1);
        width: 16rpx;
      }
    }
  }

  .page-content {
    .tabs {
      position: sticky;
      z-index: 9;

      /deep/.u-tabs {
        background-color: inherit !important;
      }
    }
  }

  .my-order {
    position: fixed;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom) + 144rpx);

    width: 128rpx;
    line-height: 54rpx;
    text-align: center;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.05);
    opacity: 1;
    border-radius: 40rpx 0rpx 0rpx 40rpx;
    color: #f0250e;
    font-size: 24rpx;
    font-weight: 600;
  }
}
</style>
